<template>
	<view @click="isMore = false">
		<view class="goods-head" :style="'background:rgba(255,255,255,' + PageScrollTop / 100 + ')'">
			<!-- 返回 -->
			<view class="back" @click="onBack">
				<view class="back-one" :class="{ action: PageScrollTop > 120 }">
					<text></text>
				</view>
			</view>
			<!-- tab切换 -->
			<view class="head-tab" v-if="PageScrollTop > 120">
				<text>商家详情</text>
			</view>
		</view>
		<!-- banner，标题 -->
		<view class="banner-title">
			<!-- banner -->
			<view class="banner">
				<swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true"
					interval="5000" duration="500">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<image :src="item.url" mode="aspectFill"></image>
						<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false
            }}" objectFit="cover" wx:if="{{item.type == 'video'}}"></video> -->
					</swiper-item>
				</swiper>
			</view>
			<!-- 价格 -->
			<!-- 			<view class="price-info" v-show="type==0">
				<view class="price">
					<text class="min">￥</text>
					<text class="max">99</text>
					<text class="min">.00</text>
				</view>

			</view> -->

			<!-- 标题 -->
			<!-- 		<view class="goods-title">
				<text>美连诚雪纺连衣裙 2020新款女夏裙子波点气质沙滩裙仙气时尚女装休闲衣服大码女装 白底红点 M</text>
			</view> -->
			<!-- 开通会员 -->
			<!-- 			<view class="dredge-vip">
				<view class="title">
					<text class="iconfont icon-vip"></text>
					<text>
						周壹淘会员

					</text>
				</view>
				<view class="dredge">
					<text>立即</text>
					<text>开通</text>
				</view>
			</view> -->
		</view>

		<!--购买须知 -->
		<!-- <view class="goods-discounts">
			<view class="list" @click="$refs['GoodsAttr'].show(1)">
				<u-icon name="info-circle" label="购买须知" labelPos="right" size=" 28"></u-icon>
				<view class="more">
					<text class="iconfont icon-more"></text>
				</view>
			</view>
			<view class="list" @click="$refs['GoodsAttr'].show(1)">
				<u-icon name="order" label="卖家权益" labelPos="right" size=" 28"></u-icon>
				<view class="more">
					<text class="iconfont icon-more"></text>
				</view>
			</view>
			<view class="list" @click="$refs['GoodsAttr'].show(1)">
				<u-icon name="server-man" label="关于我们" labelPos="right" size=" 28"></u-icon>
				<view class="more">
					<text class="iconfont icon-more"></text>
				</view>
			</view>
			<view class="list1">
				<view>快递</view>
				<text>免运费</text>

			</view>

		</view> -->
		<!-- 评论-->
		<!-- <view class="evaluate-data" ref="evaluate">
			<view class="title-more" @click="onEvaluate">
				<view class="title">
					<text>评论 </text>
					<text class="num">（999+）</text>
				</view>
				<view class="more">
					<text class="iconfont icon-more"></text>
				</view>
			</view>
			<view class="evaluate-list">
				<view class="user-info">
					<view class="thumb">
						<image src="/static/img/user_pic.jpg" mode=""></image>
					</view>
					<view class="nickname-grade">
						<view class="nickname">
							<text>爱笑的汤姆</text>
						</view>
						<view class="grade">
							<text class="cuIcon-favorfill lg text-gray"></text>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="character">
						<text class="two-omit">搭建啊激动了阿建档立卡点击就阿卡丽登记卡加端口几啊开了都金坷垃就恐龙当家哦架空</text>
					</view>


				</view>
				<view class="look-all" @click="onEvaluate">
					<text>查看全部评论</text>
				</view>
			</view>
		</view> -->
		<view class="shop" style="margin-top: 0 !important;">
			<view class="shop-list" @click="goMerchantProfile">
				<view class="list">
					<view class="goods">
						<view class="thumb">
							<image
								src=""
								mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">古玩店</text>
							</view>
							<view class="attribute">
								早9:00 --晚5:00
							</view>
						</view>

						<view class="look">
							<text>帮他靠前</text>
						</view>

					</view>
					<view class="phone">
						<text>电话：1538966666</text>
						<u-icon name="phone" color="red" size="28"></u-icon>

					</view>
					<view class="dizhi">
						<view class="">
							地址：内蒙自治区赤峰市洪山区桥北契丹古玩城1号楼三单元
						</view>

					</view>
				</view>

			</view>


		</view>
		<view class="" style="padding: 40rpx;background-color: #fff;border-bottom: #a3a3a3 solid 2rpx;">
			<u-row>
				<u-col span="3">
					全部商户
				</u-col>
				<u-col span="7">

				</u-col>
				<u-col span="2">
					<view class="" @click="goMoreMerchants">
						更多 >
					</view>
				</u-col>
			</u-row>
		</view>
		<!--店铺 -->
		<view class="shop" style="margin-top: 0 !important;">
			<view class="shop-list">
				<view class="list">
					<view class="goods">
						<view class="thumb">
							<image
								src=""
								mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">古玩店</text>
							</view>
							<view class="attribute">
								早9:00 --晚5:00
							</view>
						</view>
						<!-- 
						<view class="look">
							<text>帮他靠前</text>
						</view> -->

					</view>
					<view class="phone">
						<text>电话：1538966666</text>
						<u-icon name="phone" color="red" size="28"></u-icon>

					</view>
					<view class="dizhi">
						<view class="">
							地址：内蒙自治区赤峰市洪山区桥北契丹古玩城1号楼三单元
						</view>

					</view>
				</view>

			</view>

		</view>
		<view class="shop">
			<view class="shop-list">
				<view class="list">
					<view class="goods">
						<view class="thumb">
							<image
								src=""
								mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">古玩店</text>
							</view>
							<view class="attribute">
								早9:00 --晚5:00
							</view>
						</view>

						<!-- 						<view class="look">
							<text>帮他靠前</text>
						</view> -->

					</view>
					<view class="phone">
						<text>电话：1538966666</text>
						<u-icon name="phone" color="red" size="28"></u-icon>

					</view>
					<view class="dizhi">
						<view class="">
							地址：内蒙自治区赤峰市洪山区桥北契丹古玩城1号楼三单元
						</view>

					</view>
				</view>

			</view>


		</view>
		<!-- 全部商户 -->
		<!-- 	<view class="shuxing">
			<view class="shuxing-list">
				<view class="title">
					商品参数
				</view>
				<view class="list">
					<view class="weight">
						重量:
					</view>
					<view class="canshu">
						149.9kg
					</view>
				</view>
			</view>
			<view class="xiangqing">
				<view class="title">
					详情介绍
				</view>
				<text>青玉带牌饰品</text>
			</view>

		</view> -->
		<!-- 底部 -->
		<!-- <view class="page-footer">
			<view class="footer-fn">
				<view class="list">
					<text class="iconfont icon-kefu"></text>
					<text>客服</text>
				</view>
				<view class="list">

					<u-icon class="icon" id="myIcon" name="star-fill" label="收藏" label-size="26rpx" labelPos="bottom"
						color="red" size="20" onclick="toggleIcon()"></u-icon>
				</view>
				<view class="list" @click="onToCart">
					<text class="iconfont icon-cart"></text>
					<text>购物车</text>
				</view>
			</view>
			<view class="footer-buy">
				<view class="cart-add" @click="$refs['GoodsAttr'].show(2)">
					<text>加入购物车</text>
				</view>
				<view class="buy-at" @click="$refs['GoodsAttr'].show(3)">
					<text>立即购买</text>
				</view>
			</view>
		</view> -->

		<!-- 属性规格 -->
		<goods-attr ref="GoodsAttr"></goods-attr>
	</view>
</template>

<script>
	import GoodsAttr from '../../components/GoodsAttr/GoodsAttr.vue';

	export default {
		components: {

			GoodsAttr,
		},
		data() {
			return {
				TabShow: 0,
				isMore: false,
				AttentionShow: 0,
				swiperList: [{
						id: 0,
						type: 'image',
						url: '/static/img/goods_banner_01.webp'
					},
					{
						id: 1,
						type: 'image',
						url: '/static/img/goods_banner_02.webp'
					},
					{
						id: 2,
						type: 'image',
						url: '/static/img/goods_banner_03.webp'
					},
					{
						id: 3,
						type: 'image',
						url: '/static/img/goods_banner_04.webp'
					},
					{
						id: 4,
						type: 'image',
						url: '/static/img/goods_banner_05.webp'
					},
				],
				web_content: '<div class="m-img"><img src="https://zhedplus.oss-cn-hangzhou.aliyuncs.com/content_img/20191118/1fb5ff162f25fd4c7383bd998ff2fde9.jpg"><div class="tools" hidden><i class="fa fa-arrow-up move-up"></i><i class="fa fa-arrow-down move-down"></i><em class="move-remove" hidden ><i class="fa fa-times" aria-hidden="true"></i> 移除</em><div class="cover"></div></div></div>',
				PageScrollTop: 0,
				type: 0,
			};
		},
		onLoad(params) {
			this.type = params.type || 0;
		},
		onPageScroll(e) {
			this.PageScrollTop = e.scrollTop;
		},
		methods: {
			// 更多商家
			goMoreMerchants() {
				uni.$u.route({
					url: 'pages/moreMerchants/moreMerchants',
					params: {
						name: 'lisa'
					}
				})
			},
			// 商家简介
			goMerchantProfile() {
				uni.$u.route({
					url: 'pages/merchantProfile/merchantProfile',
					params: {
						name: 'lisa'
					}
				})
			},
			/**
			 * 返回
			 */
			onBack() {
				uni.navigateBack();
			},
			/**
			 * tab
			 */
			onTab(type) {
				this.TabShow = type;
				switch (type) {
					case 0:
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 300
						});
						break;
					case 1:
						uni.createSelectorQuery().select(".evaluate-data").boundingClientRect((data) => { //data - 各种参数
							uni.pageScrollTo({
								scrollTop: this.PageScrollTop + data.top - 50,
								duration: 300
							});
						}).exec()
						break;
					case 2:
						uni.createSelectorQuery().select(".products-introduction").boundingClientRect((
							data) => { //data - 各种参数
							uni.pageScrollTo({
								scrollTop: this.PageScrollTop + data.top - 50,
								duration: 300
							});
						}).exec()
						break;
				}
			},
			// g改变收藏颜色
			changeColor() {
				const icon = document.getElementById('myIcon');
				const currentName = icon.getAttribute('name');

				// 切换图标名称
				if (currentName === 'star-fill') {
					icon.setAttribute('name', 'star'); // 切换为 star
				} else if (currentName === 'star') {
					icon.setAttribute('name', 'yans'); // 切换为 yans
				} else {
					icon.setAttribute('name', 'star-fill'); // 切换回 star-fill
				}
			},
			/**
			 * 去购物车
			 */
			onToCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			/**
			 * 降价通知点击
			 */
			onDepreciate() {
				uni.showToast({
					title: '降价通知提醒成功',
					icon: 'success'
				})
			},
			/**
			 * 关注点击
			 */
			onAttention() {
				if (this.AttentionShow === 0) {
					this.AttentionShow = 1;
					uni.showToast({
						title: '关注成功',
						icon: 'none'
					})
				} else {
					this.AttentionShow = 0;
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					})
				}

			},
			/**
			 * 评价点击
			 */
			onEvaluate() {
				uni.navigateTo({
					url: '/pages/GoodsEvaluateList/GoodsEvaluateList'
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	@import 'merchantDetails.scss';
</style>